<template>
    <div class="data-view">
      <!-- 数据概览 -->
      <!-- <el-card> -->
        <el-card >
             <!-- 在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。 -->
            <div id="main1"></div>
        </el-card>
        <el-card >
          <div id="main3"></div>
        </el-card>
      <!-- </el-card> -->
      <el-card>
        <!-- 在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。 -->
        <div id="main2"></div>
      </el-card>
    </div>
  </template>

  <script setup>
import { onMounted,getCurrentInstance} from "vue";
    // import echarts from "echarts";//局部引入
import {Salary,Major} from '@/api/api'
//全局使用echarts
let {proxy}=getCurrentInstance()
const echarts=proxy.$echarts
    // const myEchart=inject('myechart')
    onMounted(()=>{
      Salary().then(res=>{
        console.log('薪资水平',res.data.data[0])
        console.log('薪资水平A',res.data.data[0].A)
        console.log('薪资水平B',res.data.data[0].B)
        console.log('薪资水平C',res.data.data[0].C)
        console.log('薪资水平D',res.data.data[0].D)
        console.log('薪资水平E',res.data.data[0].E)
        // let  data=res.data.data
        /* ----圆环图------*/
        // 1.通过 echarts.init 方法初始化一个 echarts 实例
        let myChart3=echarts.init(document.getElementById("main3"));
        // 2.指定图表的配置项和数据
        let option3={
          title:{//标题
            text:"薪资占比",
            textStyle:{
              color:'#333',
              fontStyle: 'normal' ,
              fontWeight: 'bolder' ,
              fontFamily: 'sans-serif' ,
              fontSize: 18 ,
            }
          },
        tooltip: {//提示框组件。
            trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          },
        legend: {//图例组件。
          top: 'bottom',//图例组件离容器上侧的距离。
          left:'center',//图例组件离容器左侧的距离。
          itemWidth: 10,//图例组件的宽
          itemHeight: 10//图例组件的高
        },
        series: [
          {
            type: 'pie',//饼图
            radius: ['50%', '70%'],//
            bottom:40,//pie 组件离容器下侧的距离。
            avoidLabelOverlap: false,//avoidLabelOverlap 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠
            itemStyle: {//图形样式。
                borderRadius: 10,//表示内圆角半径和外圆角半径都是 10px。
                borderColor: '#fff',//图形的描边颜色。
                borderWidth: 2//描边线宽
              },
            label: {//标签的位置。
              show: false,
              position: 'center'
            },
            emphasis: {//高亮状态的扇区和标签样式。
              label: {
                show: true,
                fontSize: '17',//字体大小
                fontWeight: 'bold',
              }
            },
            // data
            data: [
              { value: res.data.data[0].A, name: '薪资0-3000' },
              { value: res.data.data[0].B, name: '薪资3001-4000' },
              { value: res.data.data[0].C, name: '薪资4001-5000' },
              { value: res.data.data[0].D, name: '薪资5001-6000' },
              { value: res.data.data[0].E, name: '薪资6001-7000' }
              ]
            }
         ]
       
        }
        // 3.使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);
      })
      Major().then((res)=>{
        console.log('前端',res.data.data[0].count)
        console.log('后端',res.data.data[1].count)
        console.log('网安',res.data.data[2].count)
        console.log('数媒',res.data.data[3].count)
              /* ----柱状图----*/
        // 1.通过 echarts.init 方法初始化一个 echarts 实例
        let myChart = echarts.init(document.getElementById("main1"));
        // 2.指定图表的配置项和数据
        let option={
        title: {
            text: '专业方向'
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['前端', '后端', '网安', '数媒'],
            // nameTextStyle:{fontWeight:800}
        },
        yAxis: {},
        series: [{
            name: '人数',
            type: 'bar',
            data: [res.data.data[0].count, res.data.data[1].count, res.data.data[2].count, res.data.data[3].count],
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
                }
        }]
        }
        // 3.使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      })
  

        /* ----折线图----*/
        // 1.通过 echarts.init 方法初始化一个 echarts 实例
        let myChart2=echarts.init(document.getElementById("main2"))
        // 2.指定图表的配置项和数据
        let option2={
          title: {
            text: '就业率'
        },
            tooltip:{//提示框组件
            trigger:'axis' //触发类型
                            //'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
            },
            legend:{//图例组件
            data:["技术总监","产品经理","后端开发","前端开发","运维/测试"],
            top: 'bottom',//图例组件离容器上侧的距离。
          left:'center',//图例组件离容器左侧的距离。
          itemWidth: 10,//图例组件的宽
          itemHeight: 10,//图例组件的高
            },
            xAxis:{//直角坐标系 grid 中的 x 轴
            type:'category',
            data:["2018","2019","2020","2021","2022"]
            },
            yAxis:{//直角坐标系 grid 中的 y 轴
            type:'value',
            },
            grid: {
    // left: '3%',
    // right: '4%',
    bottom: '17%',
    containLabel: true
  },
            series:[
                    {
                        "name": "技术总监",
                        "type": "line",
                        "stack": "总量",
                        "data": [50,60,74,60,75]
                    },
                    {
                        "name": "产品经理",
                        "type": "line",
                        "stack": "总量",
                        "data": [66,34,39,42,45]
                    },
                    {
                        "name": "后端开发",
                        "type": "line",
                        "stack": "总量",
                        "data": [30,45,59,74,80]
                    },
                    {
                        "name": "前端开发",
                        "type": "line",
                        "stack": "总量",
                        "data": [33,33,44,55,55]
                    },
                    {
                        "name": "运维/测试",
                        "type": "line",
                        "stack": "总量",
                        "data": [33,55,44,66,77]
                    }
                ]
            }
        // 3.使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2)

        // console.log(myEchart())
    })

  </script>
  
  <style lang="less" scoped>
  .data-view{
    width:100%;
    display:flex;
    justify-content:space-between;

    .el-card{
      width:50%;
      #main2,#main1,#main3{
        height:350px;
        // background-color: aqua;
      }
    }
  }
 
  </style>